<template>
<div style="text-align:center">
    <h2>good</h2>
    <h3>绑定号码</h3>
    <div style="margin-left:10px;margin-top:30px">
        <div style="margin-bottom:5px">
            <span style="margin-left:32px">账号</span>
            <input type="text" class="input" readonly v-model="username">
        </div>
        <div style="margin-bottom:5px">
            <span>手机号码</span>
            <input type="text" placeholder="请输入手机号码" class="input" v-model="phone">
        </div>
        <div style="margin-bottom:20px">
            <span style="margin-left:16px">验证码</span>
            <input type="text" placeholder="请输入验证码" class="input" v-model="checkNum">
        </div>
        <div style="margin-top:80px">
            <span class="span3">*请输入11位数号码和6位数验证码</span>
            <span class="span2" @click="sendSMS()" :style="CanSend?'background-color: rgb(204, 255, 241);':''">
                {{sended?num+'s 后重新发送':'发送短信'}}</span>
        </div>
        <span class="span" @click="submit()" :style="!(CandSubmit[0]+CandSubmit[1]==2)?'background-color: rgb(213, 220, 218);':''"
        >提交</span>
        <span class="span" @click="reset()">重置</span>
        <span class="span11" @click="skip()">先不绑定？去登陆</span>
    </div>
    <div class="div3" v-show="ErrorMessage" :style="ErrorPosition+ErrorPosition2">
        <img src="../../../assets/changepsw/error.png" class="img_error">
        <span style="margin-left:15px">验证码不正确</span>
    </div>
</div>
</template>

<script>
export default {
    name:'phoneBand',
    data(){
        return{
            username:'',
            phone:'',
            checkNum:'',
            CanSend:0,
            sended:0,
            num:60,
            ErrorMessage:0,
            ErrorPosition:'',
            ErrorPosition2:'',
            CandSubmit:{0:0,1:0},
        }
    },
    mounted(){
        if(this.$route.params.username != null){
            this.username=this.$route.params.username
        }
    },
    methods:{
        reset(){this.phone=this.checkNum=''},
        skip(){this.$router.replace({name:'login',params:{'username':this.username}})},
        sendSMS(){
            if(this.CanSend){
                this.$addr.get(`sms/${this.username}/${this.phone}/1341374/send`).then(
                    response=>{
                        console.log('发送验证码请求成功',response.data);
                        if(response.data.state == 4001){
                            this.$router.replace({name:'register',params:{'username':this.username}})
                        }else{
                            this.sended=1
                            this.CanSend=0
                        }
                    },error=>{
                        this.$message({
                            message:'发送验证码请求失败，请重新登陆',
                            type:'error'
                        })
                        console.log("发送验证码请求失败",error.message);
                        this.$router.replace({name:'login'})
                    }
                )
            }
        },
        submit(){
            if(this.CandSubmit[0]+this.CandSubmit[1]==2){
                this.$addr.get(`sms/${this.username}/${this.phone}/${this.checkNum}/check`).then(
                    response=>{
                        console.log('核对验证码请求成功',response.data);
                        if(response.data.state == 4001){
                            this.$router.replace({name:'register',params:{'username':this.username}})
                        }else if(response.data.state == 7000){
                            this.ErrorMessage=1
                        }else{
                            this.$router.replace({name:'persion'})
                            // this.$router.replace({name:'login',params:{'username':this.username}})
                            this.$notify({
                                title: '恭喜您',
                                message: '成功绑定手机号',
                                type: 'success'
                            });
                        }
                    },error=>{
                        this.$message({
                            message:'核对验证码请求失败，请重新登陆',
                            type:'error'
                        })
                        console.log("核对验证码请求失败",error.message);
                        this.$router.replace({name:'login'})
                    }
                )
            }
        },
    },
    watch:{
        phone(value){
            this.CanSend=0
            this.CandSubmit[0]=0
            if(value.length == 11 && (Number(value)+1).toString()!='NaN'){
                this.CanSend=1
                this.CandSubmit[0]=1
            }
            if(value.length > 11){
                this.phone=value.slice(0,11)
            }
        },
        checkNum(value){
            this.CandSubmit[1]=0
            if(value.length == 6 && (Number(value)+1).toString()!='NaN'){
                this.CandSubmit[1]=1
            }
            if(value.length > 6){
                this.checkNum=value.slice(0,6)
            }
        },
        sended(value){
            if(value){
                this.num=60
                var id= setInterval(() => {
                    this.num--
                    if(this.num < 1){
                        clearInterval(id)
                        this.CanSend=1
                        this.sended=0
                    }
                }, 100);
            }
        },
        ErrorMessage(value){
            if(value == 1){
                // let num = -295
                let num = -345
                let ok = 0
                var id = setInterval(() => {
                    this.ErrorPosition='margin-top:'+num+'px'
                    // console.log(this.ErrorPosition,'@');
                    if(num < -365){
                        ok = 1
                        num++
                    }else if(ok){
                        if(num > -360){
                            clearInterval(id);
                        }else{
                            num++
                        }
                    }else{
                        num--
                    }
                }, 3);
                var id3 = setTimeout(() => {
                    let num2=1
                    var id2 = setInterval(() => {
                        //下面的分号非常细节
                        this.ErrorPosition2=';opacity:'+num2
                        // console.log(this.ErrorPosition2,'%');
                        if(num2 < 0.05){
                            clearInterval(id2)
                            clearTimeout(id3)
                            this.ErrorMessage=0
                            this.ErrorPosition=this.ErrorPosition2=''
                        }else{
                            num2-=0.05
                        }
                    }, 15);
                }, 1000);
            }
        }
    }
}
</script>

<style scoped>
.input{
    margin-left: 15px;
    width: 130px;
    height: 50px;
    border: 0px;
    outline: none;
    border-bottom: 0.7px solid rgb(176, 176, 176,0.7);
    padding-left: 10px;
    padding-right: 10px;
}
input::-webkit-input-placeholder{
    color: rgb(174, 174, 174);
}
.span{
    font-size: 13px;
    padding: 10px;
    padding-right: 15px;
    padding-left: 15px;
    background-color: rgb(217, 255, 202);
    margin-left: 5px;
    border-radius: 10px;
    cursor: pointer;
}
.span11{
    margin-left: 10px;
    font-size: 10px;
    color: rgb(43, 138, 255);
    cursor: pointer;
}
.span2{
    font-size: 13px;
    padding: 5px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px;
    position: absolute;
    margin-top: -45px;
    margin-left: 0px;
    cursor: pointer;
    background-color: rgb(213, 220, 218);
}
.span3{
    position: absolute;
    font-size: 12px;
    margin-top: -70px;
    margin-left: -100px;
    color: rgb(125, 125, 125);
}
.div3{
    position: absolute;
    width: 94%;
    font-size: 18px;
    text-align: center;
    padding-bottom: 15px;
    padding-top: 15px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0px 1px 5px 1px rgb(212, 212, 212) ;
    margin-top: -344px;
    /* margin-top: -294px; */
}
.img_error{
    height: 26px;
    position: absolute;
    margin-left: -15px;
    margin-top: 1px;
}
</style>